#{extends 'main.html' /} #{set title:'Home' /}

#{if flash.purchaseError}
<script>
$(document).ready(function() {
	$('#purchaseErrorModal').modal();
});
</script>
#{/if} 
#{if flash.purchaseSuccess}
<script>
$(document).ready(function() {
	$('#purchaseSuccessModal').modal();
});
</script>
#{/if} 
#{if (flash.registerUserError || flash.loginUserError)}
<script>
$(document).ready(function() {
	$('#loginWindowModal').modal();
});
</script>
#{/if}

<ul class="thumbnails">
	<li class="span2"><a href="populars.html" class="thumbnail"> <img
			src="/public/img/salad51.jpg" width="200" height="120">
			<h4>Choose our most Popular</h4>
	</a></li>
	<li class="span2"><a href="originals.html" class="thumbnail">
			<img src="/public/img/2.jpg" width="200" height="120">
			<h4>Our originals salad</h4>
	</a></li>

	<li class="span2"><a class="thumbnail"
		onclick="refreshIngredients()"><img src="/public/img/mix.jpg"
			width="200" height="120">
			<h4>Mix your own Salad</h4> </a></li>

	<li class="span2"><a href="drinks.html" class="thumbnail"> <img
			src="/public/img/drink3.jpg" width="200" height="120">
			<h4>Please select a drink</h4>
	</a></li>
</ul>

<h3>${textOption}</h3>
<div class="frame2">
	<table class="table table-hover">
		<!--  <thead>
		<tr>
			<th>Ingredients</th>
			<th>calories</th>
			<th>price</th>
			<th></th>
		</tr>
	</thead>-->
		<tbody>
			#{list items:products, as:'product'}
			<tr>
				<td>#{if product.ingredients} <select name="Ingredients"
					multiple> #{list items:product.ingredients, as:
						'ingredient'}
						<option value="${ingredient.id}">${ingredient.name}</option>
						#{/list}
				</select> #{/if}
				</td>
				<td>
					<div class="control-group">
						<div class="controls">
							<label><strong>${product.name}</strong></label> <label>${product.calories}
								CAL </label>
						</div>
					</div>
				</td>
				<td>
					<div>
						#{if product.icon?.get()} <img
							src="@{Application.getImage(product.id)}"
							class="img-rounded saladLogo" /> #{/if}
					</div>
				</td>
				<td>
					<div class="control-group">
						<div class="controls">
							<label><strong>$ ${product.price.format('0.00')}</strong></label>
							<button class="btn btn-primary btn-mini"
								onclick="addToCart(${product.id})">Add to cart</button>
						</div>
					</div>
				</td>
			</tr>
			#{/list}
		</tbody>
	</table>
</div>
